<template>
    <aside class="cus-alignment-wrap m-b bt-line">
        <h4 class="cus-alignment__title no-select m-b">水平对齐</h4>
        <div class="cus-alignment__item">
            <n-tooltip v-for="(item, index) in horizontalAlignment" :key="index" placement="bottom" trigger="hover">
                <template #trigger>
                    <span :class="['property cursor', {'is-active': horizontalIndex === index }]" @click="setAlignment(item, index)">
                        <i :class="[`${item.icon}`]"></i>
                    </span>
                </template>
                <span>{{ item.textTip }}</span>
            </n-tooltip>
        </div>
    </aside>
    <aside class="cus-alignment-wrap m-b bt-line">
        <h4 class="cus-alignment__title no-select m-b">垂直对齐</h4>
        <div class="cus-alignment__item">
            <n-tooltip v-for="(item, index) in verticalAlignment" :key="index" placement="bottom" trigger="hover">
                <template #trigger>
                    <span :class="['property cursor', {'is-active': verticalIndex === index }]" @click="setVerticalAlignment(item, index)">
                        <i :class="[`${item.icon}`]"></i>
                    </span>
                </template>
                <span>{{ item.textTip }}</span>
            </n-tooltip>
        </div>
    </aside>
</template>

<script setup name="Alignment">
import useSharedCore from '@/hooks/shared'
import { config } from "../config/editor"

const { coverEditor } = useSharedCore();
const { horizontalAlignment, verticalAlignment } = config
const horizontalIndex = ref(-1)
const verticalIndex = ref(-1)

function setVerticalAlignment(item, index) {
    verticalIndex.value = index
    const { height } = coverEditor.canvas
    const node = coverEditor?.canvas?.getActiveObject() || null
    if (node) {
        let params = {
            top: node.top,
            originY: node.originY
        }
        switch (item.originY) {
            case 'top':
                params.top = 0
                params.originY = item.originY
                break;
            case 'center':
                params.top = height/2
                params.originY = item.originY
                break;
            case 'bottom':
                params.top = height
                params.originY = item.originY
                break;
            default:
                break;
        }
        node.set({ ...params })
        coverEditor.canvas.renderAll()
    }
}

function setAlignment(item, index) {
    horizontalIndex.value = index
    const { width } = coverEditor.canvas
    const node = coverEditor?.canvas?.getActiveObject() || null
    if (node) {
        let params = {
            left: node.left,
            originX: node.originX
        }
        switch (item.originX) {
            case 'left':
                params.left = 0
                params.originX = 'left'
                break;
            case 'center':
                params.left = width/2
                params.originX = 'center'
                break;
            case 'right':
                params.left = width
                params.originX = 'right'
                break;
            default:
                break;
        }
        node.set({ ...params })
        coverEditor.canvas.renderAll()
    }
}

</script>

<style lang="scss" scoped>
    .cus-alignment {
        &__title {
            font-size: 14px;
        }
        &__item {
            .property {
                padding: 5px 8px;
                margin: 0 2px;
                border-radius: 4px;
                &.is-active {
                    color: #eee;
                    background: $activeColor;
                }
            }
        }
    }
</style>